<template>
  <div class="Forgot">
    <div class="fan">
      <p @click="() => {
        $router.push('/login')
      }"><van-icon name="arrow-left" /></p>
    </div>
    <div class="box" v-if="mpnaea">
      <h2>找回密码</h2>
      <div class="input-box">
        <label>手机号</label>
        <input type="text" v-model="accner" />
      </div>
      <div class="input-box input-box1">
        <input type="text" v-model="codeyan" />
        <button @click="startCountdown('phone')" :disabled="countdown > 0">{{ buttonText }}</button>
      </div>
      <div class="input-box">
        <label>新的密码</label>
        <input type="password" v-model="password" />
      </div>
      <div class="btn-box">
        <div>
          <button @click="submit()">下一步</button>
        </div>
        <div>
          <p style="font-size: x-small;color: aliceblue;" @click="() => {
            mpnaea = !mpnaea
            countdown = 0
            accner = ''
            buttonText = '发送验证码'
          }">使用邮箱找回</p>
        </div>
      </div>
    </div>
    <div class="box" v-if="!mpnaea">
      <h2>找回密码</h2>
      <div class="input-box">
        <label>邮箱</label>
        <input type="text" v-model="email" />
      </div>
      <div class="input-box input-box1">
        <input type="text" v-model="codeyan" />
        <button @click="startCountdown('email')" :disabled="countdown > 0">{{ buttonText }}</button>
      </div>
      <div class="input-box">
        <label>新的密码</label>
        <input type="password" v-model="password" />
      </div>
      <div class="btn-box">
        <div>
          <button @click="submit()">下一步</button>
        </div>
        <div>
          <p style="font-size: x-small;color:aliceblue;" @click="() => {
            mpnaea = !mpnaea
            countdown = 0
            email = ''
            buttonText = '发送验证码'
          }">使用手机号找回</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import './style.css'
import { showToast } from 'vant';
import axios from 'axios';
import router from '../../router';

let accner = ref('')
let password = ref('')
let codeyan = ref('')
let email = ref('')
let mpnaea = ref(true)
let Cctvcation = ref('')

//发送邮件验证码 
async function sendemail() {
  //邮件正则
  const qqEmailRegex1 = /^[1-9]\d{4,10}@qq\.com$/;
  const qqEmailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  
  // zhou1293481319@proton.me
  if (qqEmailRegex.test(email.value)||qqEmailRegex1.test(email.value)) {
    let { data } = await axios.get("mxx/getemail", {
      params: {
        mail: email.value
      }
    })
    if (data.code === 201) {
      showToast({
        message: data.msg,
        icon: 'fail',
      });
      return
    } else {
      countdownTimer()
      showToast({
        message: data.msg,
        icon: 'success',
      });
      Cctvcation.value = data.data
    }

  } else {
    showToast({
      message: '邮箱格式不正确',
      icon: 'fail',
    });
    return
  }

}

//发送手机验证码
const getcode = async () => {
  let regPhone = /^1[3-9]\d{9}$/
  if (regPhone.test(accner.value)) {
    let { data } = await axios.get("mxx/Test/MobileCodeNumber", { params: { phone: accner.value } })
    if (data.code === 200) {
      countdownTimer()
      Cctvcation.value = data.rightcode
      showToast({
        message: data.msg,
        icon: 'success',
      });
    } else {
      showToast({
        message: data.msg,
        icon: 'fail',
      });
    }
  } else {
    showToast({
      message: '请输入正确的手机号',
      icon: 'fail',
    });
  }
}


const countdown = ref(0); // 倒计时
const buttonText = ref('发送验证码'); // 按钮

//判断找回类型
const startCountdown = (type) => {
  if (type == 'email') {
    if (!email.value) {
      showToast({
        message: '邮箱还未输入哦',
        icon: 'fail',
      });
      return
    } else {
      sendemail()
    }

  } else {
    if (!accner.value) {
      showToast({
        message: '手机号还未输入',
        icon: 'fail',
      });
      return
    } else {
      getcode()
    }

  }

}

//按钮倒计时
const countdownTimer = () => {
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    buttonText.value = `${countdown.value}秒后重试`;
    if (countdown.value <= 0) {
      clearInterval(timer);
      buttonText.value = '发送验证码';
    }
  }, 1000);
};

//提交
const submit = async () => {
  if (codeyan.value == Cctvcation.value) {
    if (password.value.length < 6) {
      showToast({
        message: '密码不能小于6位',
        icon: 'fail',
      });
    }
    else if (password.value.length > 16) {
      showToast({
        message: '密码不能大于16位',
        icon: 'fail',
      });
    }
    else if (password.value.length >= 6 && password.value.length <= 16) {
      let data = await axios.put('mxx/updatepassword', {password:password.value,
        phone:accner.value,email:email.value})
      if(data.data.code===200){
        showToast({
          message: data.data.msg,
          icon: 'success',
        })
        router.push('/login')
      }else{
        showToast({
          message: data.data.msg,
          icon: 'fail',
        })
      }
    }
  }
  else {
    showToast({
      message: '验证码错误',
      icon: 'fail',
    });

  }
}
</script>

<style lang="less" scoped></style>